<template>
  <div id="loginInputCodeBox">
      <div>验证码</div>
      <input type="number" v-model="code" @input="getValue" max="4" min="4">
      <div id="inputTime" > 
        <span v-if="!showTime" @click="getCode" class="codeBlue">获取验证码</span>
        <span v-if="showTime">{{this.time}}秒后重试</span>
      </div>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>

  </div>
</template>
<script>
import {getCode,getCodeTi} from '../../../service/getData'
import { Toast } from 'vux'
import {verify,showMsg, getStore} from '../../../config/mUtils'

export default {
  components:{
    Toast
  },
  created(){
    
  },
  data(){
    return {
      code:'',
      showTime:false,
      second:60,
      msg:'',
      showPositionValue:false,

    }
  },
  props:['phone','type'],
  methods:{
    getCode(){
      if(getStore('loginkey')){
        getCodeTi(this.type,this.phone,getStore('loginkey'))
          .then(res=>{
            if(res.status == 1){
              let that = this;
              this.showTime = true;
        
              let timer = window.setInterval(function(){
                if((that.second--) <= 0){
                  that.showTime = false;
                  that.second = 60;
                  clearInterval(timer)
                }
              },1000)
            }
            showMsg(res.msg,this)
          })
      }else{
        getCode(this.type,this.phone)
          .then(res=>{
            if(res.status == 1){
              let that = this;
              this.showTime = true;
        
              let timer = window.setInterval(function(){
                if((that.second--) <= 0){
                  that.showTime = false;
                  that.second = 60;
                  clearInterval(timer)
                }
              },1000)
            }
            showMsg(res.msg,this)
          })
      }
    },
    getValue(){
      this.$emit('getValue',this.code)
    }
  },
  computed:{
    time:function(){
      return this.second;
    }
  }
}
</script>
<style lang="less">
  #loginInputCodeBox{
    height: 1.7067rem;
    margin-top: 0.56rem;
    color: #939393;
    font-size: 0.44rem;
    position: relative;
    input{
      height: 1rem;
      width: 100%;
      font-size: .5rem;
      font-weight: bold;
      border: 1px solid transparent;
      border-bottom: 1px solid #ededed;
      outline:none;
      // background-color: springgreen
    }
    #inputTime{
      display: inline-block;
      position: absolute;
      top: 50%;
      right: 0;
      .codeBlue{
        color:#327bf6;
      }
    }      
    .weui-toast,.weui-toast_text,.vux-toast-middle{
        width: 70% !important;
      }
  }
</style>
